<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="author" content="何毓堂">
        <title></title>
         <link rel="stylesheet" type="" href="">
        <style>
        header {
            font-size: 25px;
            width: 300px;
            border: 1px solid aqua;
        }

        nav{
            display: inline-block;
            width: 150px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: hotpink;
        }

        span {
            float: right;
            width: 150px;
            text-align: center;
            height: 50px;
            line-height: 50px;
            background-color: violet;
            cursor: pointer;
        }

        section {
            float: right;
            border: 2px solid #555;
            display: none;
        }

        div{
            width: 150px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #fff;
            border-collapse: collapse;
            border-bottom: 1px dashed violet;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <script src="./jquery.js"></script>
    <header>
        <nav>选择项目：</nav>
        <span><article>未选择</article>
            <section>
                <div>html5</div>
                <div>css3</div>
                <div>JavaScript</div>
                <div>jQuery</div>
            </section>
        </span>

    </header>

</body>

<html>
<script>
    $('span').mouseover(function () {
        $('section').css('display', 'block');
        $('div').click(function () {
        $('article').text($(this).text());
        $("section").css("display","none");
        });
    });
    $('span').mouseout(function(){
    $("section").css("display","none");
  });

</script>